import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const tabsDocs= { source: { code: `
		tabs := component.NewTabs(component.HorizontalTabs, []component.SingleTab{
			{
				Name: "Tab 1",
				Contents: component.FlexLayout{
					Base: component.Base{Metadata: component.Metadata{
						Type: component.TypeFlexLayout,
					}},
					Config: component.FlexLayoutConfig{
						Sections: []component.FlexLayoutSection{{
							{
								Width: component.WidthFull,
								View:  component.NewButton("test", action.Payload{"foo": "bar"}),
							},
						}},
						ButtonGroup: nil,
					},
				},
			},
			{
				Name: "Tab 2",
				Contents: component.FlexLayout{
					Base: component.Base{Metadata: component.Metadata{
						Type: component.TypeFlexLayout,
					}},
					Config: component.FlexLayoutConfig{
						Sections: []component.FlexLayoutSection{{
							{
								Width: component.WidthFull,
								View:  component.NewText("My Text"),
							},
						}},
						ButtonGroup: nil,
					},
				},
			},
		})
`}}

export const tabsVerticalDocs= { source: { code: `
		tabs := component.NewTabs(component.VerticalTabs, []component.SingleTab{
			{
				Name: "Tab 1",
				Contents: component.FlexLayout{
					Base: component.Base{Metadata: component.Metadata{
						Type: component.TypeFlexLayout,
					}},
					Config: component.FlexLayoutConfig{
						Sections: []component.FlexLayoutSection{{
							{
								Width: component.WidthFull,
								View:  component.NewButton("test", action.Payload{"foo": "bar"}),
							},
						}},
						ButtonGroup: nil,
					},
				},
			},
			{
				Name: "Tab 2",
				Contents: component.FlexLayout{
					Base: component.Base{Metadata: component.Metadata{
						Type: component.TypeFlexLayout,
					}},
					Config: component.FlexLayoutConfig{
						Sections: []component.FlexLayoutSection{{
							{
								Width: component.WidthFull,
								View:  component.NewText("My Text"),
							},
						}},
						ButtonGroup: nil,
					},
				},
			},
		})
`}}

export const tabsView = {
  config: {
    tabs: [
      {
        name:"Tab 1",
        contents:{
          config:{
            sections:
              [[
                {
                  width: 24,
                  view:{
                    config:{
                      name:"test",
                      payload:{
                        foo:"bar"
                      }
                    },
                    metadata:{type:"button"}
                  }
                }
              ]]
          },
          metadata:{
            type:"flexlayout"
          }
        }
      },
      {
        name:"Tab 2",
        contents:{
          config:{
            sections:
              [[
                {
                  width: 24,
                  view:{
                    config:{
                      value:"My Text"
                    },
                    metadata:{
                      type:"text"
                    }
                  }
                }
              ]]
          },
          metadata:{
            type:"flexlayout"
          }
        }
      }
    ]
  },
  metadata: {
    type: 'tabsView',
  },
}

export const tabsVerticalView = {
  config: {
    orientation: "vertical",
    tabs: [
      {
        name:"Tab 1",
        contents:{
          config:{
            sections:
              [[
                {
                  width: 24,
                  view:{
                    config:{
                      name:"test",
                      payload:{
                        foo:"bar"
                      }
                    },
                    metadata:{type:"button"}
                  }
                }
              ]]
          },
          metadata:{
            type:"flexlayout"
          }
        }
      },
      {
        name:"Tab 2",
        contents:{
          config:{
            sections:
              [[
                {
                  width: 24,
                  view:{
                    config:{
                      value:"My Text"
                    },
                    metadata:{
                      type:"text"
                    }
                  }
                }
              ]]
          },
          metadata:{
            type:"flexlayout"
          }
        }
      }
    ]
  },
  metadata: {
    type: 'tabsView',
  },
}

export const TabsStoryTemplate = args => ({
  template: `<app-tabs-view [view]= "view"></app-tabs-view>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

<h1>Tabs component</h1>
<h2>Description</h2>

<p>The Tab component can have any other component inside, you can use to organize your views.</p>

<h2>Example</h2>

<Meta title="Components/Tabs" argTypes = { argTypesView } />

<Canvas withToolbar>
   <Story name="Horizontal Tabs component"
          parameters={{ docs: tabsDocs }}
          args= {{ view: tabsView }}>
     { TabsStoryTemplate.bind({}) }
   </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Horizontal Tabs component" />

<h2>Vertical Tabs</h2>

<Canvas withToolbar>
   <Story name="Vertical Tabs component"
          parameters={{ docs: tabsVerticalDocs }}
          args= {{ view: tabsVerticalView }}>
     { TabsStoryTemplate.bind({}) }
   </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Vertical Tabs component" />
